<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健身-我的页面</title>
</head>

<body class="dpflex clum">

    <main class="flex1">

        <!-- header -->
        <div class="header dpflex clum">
            <div class="TxName dpflex">
                <!-- 头像 -->
                <div class="userImg">
                    <img src="./img/headerPic.jpg" alt="" title="头像">
                </div>
                <div class="userN">
                    用户名
                </div>
                <!-- vip图标 -->
                <div class="vip"></div>

            </div>
            <!-- 个性签名 -->
            <div class="userMsg">
                个性签名: 这个人很懒，什么都没有留下
            </div>
        </div>

        <!-- 运动数据块 -->
        <div class="sport-k dpflex clum">
            <!-- 上面部分 -->
            <div class="sportTop flex1">
                <!-- 左边icon和文字 -->
                <div class="leftText dpflex">
                    <i class="iconfont icon-shuju"></i>
                    <p>运动数据</p>
                    <!-- 头部向右箭头 -->
                    <i class="jianTou iconfont icon-xiangyoujiantou"></i>
                </div>
            </div>

            <!-- 下面  分钟 -->
            <div class="sportTime dpflex jastaround">
                <div class="leftTime">
                    <div class="zong">总运动</div>
                    <div class="mini dpflex">
                        <span class="sportNum">0</span>
                        <p>分钟</p>
                    </div>
                </div>
                <!-- 千卡  部分 -->
                <div class="rightLarge">
                    <div class="week">本周消耗</div>
                    <div class="large dpflex">
                        <span class="largeNum">0</span>
                        <p>千卡</p>
                    </div>
                </div>
            </div>
        </div>



        <!-- 徽章块 -->
        <div class="badge dpflex clum">
            <!-- 上面部分 -->
            <div class="badgeTop flex1">
                <!-- 左边icon和文字 -->
                <div class="leftText dpflex">
                    <i class="iconfont icon-sharpicons_badge-"></i>
                    <p>我的运动徽章</p>
                    <!-- 头部向右箭头 -->
                    <i class="jianTou iconfont icon-xiangyoujiantou"></i>
                </div>
            </div>

            <!-- 徽章图 -->
            <div class="badgeBut dpflex culm jastaround">
                <div class="box1"></div>
                <div class="box2"></div>
                <div class="box3"></div>
            </div>
        </div>



        <!-- 退出登录按钮 -->
        <div class="btn">
            退出登录
        </div>


        <!-- 头像上传 -->
        <input type="file" id="opload">

    </main>



    <!-- 页脚 -->
    <!-- utils生成页脚footer -->

</body>

</html>